<script setup lang="ts">
import { reactive, ref, computed } from "vue";

var top_text = "<h3>张三</h3>";

const data = reactive([
  {
    id: 3,
    name: "懒人小沙发",
    describe: "舒适休闲，完善支撑",
    price: 126.4,
    isHot: 1,
  },
  { id: 4, name: "减压弹力球", describe: "释放压力，放松身心", price: 95.2 },
  { id: 5, name: "简约一字发夹", describe: "简约设计，百搭款式", price: 15.9 },
  {
    id: 6,
    name: "毛线小兔子耳朵发夹",
    describe: "可爱萌趣，精致做工",
    price: 12.7,
  },
  {
    id: 6,
    name: "华为畅享 60X",
    describe: "7000mA 大电池鸿蒙系统",
    price: 688,
    isHot: 1,
  },
]);
// 定义了响应式
// 变量 find_text 搜索关键字；定义了 filteredData 变量，通过使用 Vue 中的 computed 属性
// 对与商品列表数据 data 中的 name 的值进行对比，然后返回新数据。在<template>标签中通
// 过 v-model="find_text"对<input>标签和 find_text 变量进行了双向数据绑定
var find_text = ref("");
const filteredData = computed(() => {
  const query = find_text.value.toLowerCase();
  return data.filter(
    (item) =>
      item.name.toLowerCase().includes(query) ||
      item.describe.toLowerCase().includes(query)
  );
});
// 使用计算属性或侦听器实现商品搜索功能。
watch(find_text, () => {
  console.log("find_text 发生变化");
});
import { watch } from "vue";
watch(
  () => find_text.value,
  () => {
    console.log("find_text 值发生变化");
  }
);
watchEffect(() => {
  console.log("find_text 值发生变化");
});
import { watchEffect } from "vue";
</script>

<template>
  <div class="top">
    <input type="text" placeholder="搜一搜" v-model="find_text" />
    <button>搜索</button>
    <div v-html="top_text" class="top_h3"></div>
  </div>

  <div class="list_tit"><h1>商品列表</h1></div>

  <div class="list">
    <div class="list_ul">
      <div class="list_li" v-for="value in filteredData" :key="value.id">
        <div class="li_img">图片</div>
        <p>{{ value.describe }}</p>
        <span>{{ value.name }}</span>
        <h3>{{ value.price }}</h3>
        <span class="isHot" v-if="value.isHot">热卖</span>
      </div>
    </div>
  </div>
</template>
<style scoped>
/* 使标题栏呈黑色背景，文字颜色为白色，并将搜索框和按钮垂直居中对中，且挨在一起，将标题栏和搜索框水平居中对齐，张三在最右边 ，*/
.top {
  height: 50px;
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top {
  height: 53px;
  width: 100%;
  background: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top input {
  display: block;
  padding-left: 5px;
  color: #666;
  width: 150px;
  height: 32px;
  border-radius: 10px;
}
.top button {
  display: block;
  padding: 0 5px;
  color: #666;
  width: 50px;
  height: 35px;
  border-radius: 10px;
  border: none;
}
.top_h3 {
  width: 1080px;
  font-weight: 100;
  line-height: 53px;
  color: #f2f2f2;
  text-align: end;
}
.list_tit {
  width: 1280px;
  margin: 30px auto 50px;
}
.list {
  width: 100%;
  display: flex;
  justify-content: center;
}
.list_ul {
  width: 1280px;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.list_li {
  position: relative;
  width: 300px;
  border-radius: 5px;
  height: 100%;
  text-align: left;
  overflow: hidden;
  margin: 0 18px 20px 0;
}
.li_img {
  width: 100%;
  height: 200px;
  text-align: center;
  line-height: 200px;
  background: #abe1cc;
}
.list_li p {
  font-size: 18px;
  line-height: 1px;
}

.list_li span {
  display: block;
  font-size: 14px;
  color: #888;
}
.list_li h3 {
  font-size: 28px;
  color: #cf4444;
  line-height: 1px;
}
.list_li .isHot {
  position: absolute;
  width: 50px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: #cf4444;
  border-radius: 10px;
  bottom: 30px;
  right: 10px;
  color: yellow;
  font-family: "宋体";
}
</style>
